<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>过磅定价</title>
        <link rel="stylesheet" href="<c:url value="/static/wx/css/style.css"/>" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/rem.js"/>"></script>
    </head>
    <body class="befeff4">
        <div id="wrap">
            <div class="wrap_order">
                <div class="wrap_address mt10 padding20 wa">
                    <ul class="ul_info">
                        <li><label>预约 </label><span>${orderVo.pickTime }</span></li>
                        <li><label>下单时间  </label><span>${orderVo.createTime.substring(5,16) }</span></li>
                        <li><label>联系信息  </label><span>${orderVo.city }${orderVo.area }${orderVo.address }</span></li>
                        <li><label></label><span>${orderVo.userContacts }  ${orderVo.userTelephone }</span></li>
                    </ul>
                </div>
                <div id="wrap_select_all" class="bf">
                    <div class="wrap_select">
                        <div class="wrap_category common_list mt10" title="category">
                            <div class="common relative">
                            <label>回收类别</label><span class="text_category"></span>
                            <i class="right_icon"></i>
                            </div>
                        </div>
                        <div class="wrap_weight common_list">
                            <div class="common relative c333">
                            <label class="fl">录入重量</label><input class="entry_input text_weight" type="text" onkeyup="clearNoNum(this)"/> kg
                            </div>
                        </div>
                        <div class="wrap_price common_list">
                            <div class="common relative c333">
                            <label class="fl">录入单价</label><input class="entry_input text_price" type="text" onkeyup="clearNoNum(this)"/>元
                            <span class="subtotal cff6633 fr">小计：<b>0</b>元</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ex_add bf pt30 tc"><a href="javascript:void(0);" class="c999" id="add_reclaim"><b>+</b> 添加回收物</a></div>
            </div>
            <div class="total pt50 bf cff6633 f14 tc">总计：<b id="total">0</b>元 </div>
            <div class="wrap_btn bf ptb25">
                <a href="javascript:void(0)"  class="button" id="submit_btn">支付</a>
                <!--<p class="text tc">
                    <input type="checkbox" id="chk_agree" checked="checked"> 阅读并同意
                    <a href="#" id="agreement" target="_blank">《再生网用户服务协议》</a>
                </p>-->
            </div>
            <!--回收类别弹窗开始-->
            <div class="mask" id="mask_category">
            <div class="confirm" id="wrap_category" title="wrap_category">
                <div class="confirm_h"><span class="cancel fl">取消</span> 选择类别范围   <span class="sure fr">确定</span> </div>
                <ul class="confirm_c">
                    <c:forEach items="${listCategory }" var="listCategory">
                        <li id="${listCategory.categoryId }">${listCategory.name }</li>
                    </c:forEach>
                </ul>
            </div>
            </div>
            <!--回收类别弹窗结束-->
            <!--下单成功提示弹窗开始-->
            <div class="msg-succ">
                <img src="<c:url value="/static/wx/img/succ_icon.png"/>" /> <span class="f20">已定价</span> 
            </div>
            <!--下单成功提示弹窗结束-->
            <!--提示弹窗开始-->
            <div class="msg-error"></div>
            <!--提示弹窗结束                                                                                                                                                                                                                                                                                                                                                                                                                   -->
        </div>
        
        <input type="hidden" id="id" value="${orderVo.bId }" />
        <input type="hidden" id="receiptId"  value="${orderVo.receiptId }" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/jquery-3.3.1.min.js"/>" ></script>
        <script type="text/javascript">
            var title_;
            var text_;
            var data_name;
            var id_;
            
            $(document).ready(function(){
            	 var c_list = $("#wrap_category li:first-child").text();
            	 var c_id = $("#wrap_category li:first-child").attr("id");
				 $(".text_category").text(c_list);
				 $(".text_category").attr({"id":c_id});
				 
				 //点击蒙版关闭弹层
				  $(".mask").on("click",function(){
						$(this).hide();
				  })
				  //阻止事件冒泡
				  $(".confirm").on("click",function(e){
						var ev = e || event;
						ev.stopPropagation();
						return false;
					})
                
                $(".text_price , .text_weight").on("keyup",function(){
                    var weight_ =  $(this).parents(".wrap_select").children().find("input.text_weight").val();
                    var price_  =  $(this).parents(".wrap_select").children().find("input.text_price").val();
                    var subtotal_ = (weight_*price_).toFixed(2);
                    $(this).parents(".wrap_select").children().find(".subtotal b").text(subtotal_);
                    var total_ = total();
                    $("#total").text(total_);
                })
                //增加品类
                $(".ex_add").on("click","#add_reclaim",function(){
                    var text_category = $(".text_category").text();
                    var text_weight = $(".text_weight").val();
                    var text_price = $(".text_price").val();
                    var htmlStr = "";
                        htmlStr += '<div class="wrap_select">';
                        htmlStr += '<div class="wrap_category common_list mt10" title="category">';
                        htmlStr += '    <div class="common relative">';
                        htmlStr += '    <label>回收类别</label><span class="text_category"></span>';
                        htmlStr += '    <i class="right_icon"></i>';
                        htmlStr += '    </div>';
                        htmlStr += '</div>';
                        htmlStr += '<div class="wrap_weight common_list">';
                        htmlStr += '    <div class="common relative c333">';
                        htmlStr += '    <label class="fl">录入重量</label><input class="entry_input text_weight" type="text" onkeyup="clearNoNum(this)"/> kg';
                        htmlStr += '    </div>';
                        htmlStr += '</div>';
                        htmlStr += '<div class="wrap_price common_list">';
                        htmlStr += '    <div class="common relative c333">';
                        htmlStr += '    <label class="fl">录入单价</label><input class="entry_input text_price" type="text" onkeyup="clearNoNum(this)"/>元';
                        htmlStr += '    <span class="subtotal cff6633 fr">小计：<b>0</b>元</span>';
                        htmlStr += '    </div>';
                        htmlStr += '</div>';
                        htmlStr += ' </div>';
//                  if(text_category&&text_weight&&text_price){
                        $("#wrap_select_all").append(htmlStr);
                        var c_list = $("#wrap_category li:first-child").text();
                        var c_id = $("#wrap_category li:first-child").attr("id");
	       				$(".text_category").text(c_list);
	       				$(".text_category").attr({"id":c_id});
//                  }
                    
                    //点击显示弹窗
                    $(".wrap_select").on("click",".common_list",function(){
                        var that = this;
                            title_ = $(that).attr("title");
                        $(".common_list").each(function(){
                            var index_ = $(this).index;
                            var data_ = "data"+index_;
                            $(that).attr({"data":data_});
                            data_name = $(that).attr({"data":data_});
                        })
                        showConfirm();
                    })
                    
                    $(".text_price , .text_weight").on("keyup",function(){
                        var weight_ =  $(this).parents(".wrap_select").children().find("input.text_weight").val();
                        var price_  =  $(this).parents(".wrap_select").children().find("input.text_price").val();
                        var subtotal_ = (weight_*price_).toFixed(2);
                        $(this).parents(".wrap_select").children().find(".subtotal b").text(subtotal_);
                        var total_ = total();
                        $("#total").text(total_);
                     })
                })
                
                $(".wrap_select").on("click",".common_list",function(){
                    var that = this;
                        title_ = $(that).attr("title");
                    $(".common_list").each(function(){
                        var index_ = $(this).index;
                        var data_ = "data"+index_;
                        $(that).attr({"data":data_});
                        data_name = $(that).attr({"data":data_});
                    })
                    showConfirm();
                })
                //底部弹层确定事件
                $("span.sure").on("click",function(){
                    data_name.children().find("span").html(text_);
                    data_name.children().find("span").attr({"id":id_});
                    $(".mask").hide();
                })
                //底部弹层取消事件
                $("span.cancel").on("click",function(){
                    $(".mask").hide();
                })
                //底部弹窗列表选择
                $(".confirm_c").on("click","li",function(){
                     text_ = $(this).text();
                     id_ = $(this).attr("id");
                    $(this).addClass("on").siblings("li").removeClass("on");
                })
                
                //提交
                var flag = false;
                $("#submit_btn").on("click",function(){
                    //类别
                    var text_category = [];
                    //重量
                    var text_weight = [];
                    //单价
                    var text_price = []; 
                    // 小计
                    var subtotal_ = [];
                    //总计
                    var total = $("#total").text();
                    
                    var bool = true;
                    
                    $(".text_category").each(function(){
                        var text_ = $(this).text()
                        var str_ = $(this).attr("id");
                        if(!text_){
                            alert("回收类别不能为空");
                            bool = false;
                        }else{
                            text_category.push(str_);
                        }
                    })
                    $(".text_weight").each(function(){
                        var str_ = $(this).val();
                        if(!str_){
                            alert("重量不能为空");
                            bool = false;
                        }else{
                            text_weight.push(str_);
                        }
                    })
                    $(".text_price").each(function(){
                        var str_ = $(this).val();
                        if(!str_){
                            alert("单价不能为空");
                            bool = false;
                        }else{
                            text_price.push(str_);
                        }
                    })
                    $(".subtotal b").each(function(){
                        var str_ = parseFloat($(this).text());
                        subtotal_.push(str_);
                    })
                    
                    var id = $("#id").val();
                    var receiptId = $("#receiptId").val();
                    if(bool == true){
                    	var f = arguments.callee, self = this;
				        $(self).unbind('click', f);
                    	$.ajax({
                            type: "post",
                            url: "<c:url value="/wx/toUpdateOrder.do"/>",
                            data: {
                                categoryStr : text_category,
                                actualWeightStr : text_weight,
                                priceStr : subtotal_,
                                id : id,
                                status : 1
                            },
                            cache: true, 
                            async:false, 
                            dataType: "json",
                            success: function(data){
                                if (data.msg == "1") {
                                    $(".msg-succ").show();
                                    setTimeout(go(id,total), 3000);
                                }else{
                                	$(self).click(f);
                                }
                            }
                        });
                    }
                })
            })
            //显示弹窗
            function showConfirm(){

                if(title_=="category"){
                    $("#mask_category").show().siblings(".mask").hide();
                }

            }
            
            //js控制input框只能输入数字和一位小数点和小数点后面两位小数
            function clearNoNum(obj){ 
                obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
                obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
                obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
                obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
                if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
                    obj.value= parseFloat(obj.value); 
                } 
            } 
            
            function go(id,total){
                $(".msg-error").hide();
                window.location.href = "<c:url value="/wx/toPayment.do"/>?id="+id+"&total="+total;
            }
            
            function total(){
                    var arr_sub = [];
                    var str_sub = 0;
                    $(".subtotal b").each(function(){
	                    var subtotal = parseFloat($(this).text());
	                    arr_sub.push(subtotal);
                    })
                    for (var i=0; i<arr_sub.length; i++) {
                        str_sub += arr_sub[i];
                    }
                    return str_sub;
                }

        </script>
    </body>
</html>
